<template>
	<view class="dataDetail-container">
		<view class="equi-id">
			<view class="title">
				设备ID:
			</view>
			<view class="id">
				<text>52533633ATGG00</text>
				<!-- <uni-icons type="bottom" size="12" style="margin-left: 8rpx;"></uni-icons> -->
			</view>
		</view>
		<view class="date">
			<view class="title">
				监测数据
			</view>
			<view class="time">
				更新于 {{newTime}}
			</view>
		</view>
		<view class="detail-box">
			<view class="detail-item" v-for="(item,index) in dataList" :key="index" @click="toChart(item)">
				<view class="item-img">
					<image :src="$getImageSrc(item.img)" mode="widthFix"></image>
				</view>
				<view class="item-content">
					<view class="title">
						{{item.content}}
					</view>
					<view class="value">
						{{item.title}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {equipmentPage,obtainDeviceData,getDetailedData,equipmentStatistics,getDataDetailInfo} from '../../untils/api.js'
	import {formatTimestamp} from '../../untils/pubic.js'
	export default {
		data() {
			return {
				newTime:'',
				dataList: [
					
				],
				options:{}
			}
		},
		methods: {
			toChart(item) {
				uni.navigateTo({
					url:`/subpackage/airTemperature/index?circuit=${item.circuit}&equipmentCode=${item.equipmentCode}&name=${item.name}`
				})
			},
			async getDataList(code) {
				uni.showLoading({
					title:'加载中'
				})
				const res = await getDetailedData(code)
				uni.hideLoading()
				console.log(res)
				this.newTime = formatTimestamp(res.data[0]?.newestTime)
				this.dataList = res.data.map(item => {
					return {
						...item,
						title:`${item.newestData}${item.unit}`,
						content:item.name,
						img:item.circuit + '.png'
					}
				})
			}
		},
		onShow() {
			
			this.getDataList(this.options.equipmentCode)
		},
		onLoad(options) {
			this.options = options
		}
	}
</script>

<style lang="scss" scoped>
	.dataDetail-container {
		height: 100%;
		background: #F4F5F5;
		overflow: hidden;

		.equi-id {

			width: 750rpx;
			height: 96rpx;
			background: #FFFFFF;
			display: flex;
			align-items: center;

			.title {
				margin-left: 30rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #929496;
				margin-right: 12rpx;
			}

			.id {
				font-weight: 500;
				font-size: 28rpx;
				color: #181D21;
			}
		}

		.date {
			display: flex;
			align-items: center;
			margin: 30rpx;

			.title {
				font-weight: 500;
				font-size: 28rpx;
				color: #181D21;
			}

			.time {
				margin-left: 20rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #929496;
			}
		}

		.detail-box {
			margin: 0 20rpx;
			display: grid;
		   grid-template-columns: repeat(2,1fr);
		   gap: 8rpx;
		   /* 设置左对齐 */
		   justify-content: start;

			.detail-item {
				// width: 346rpx;
				height: 160rpx;
				background: #FFFFFF;
				border-radius: 12rpx;
				margin-bottom: 12rpx;
				display: flex;
				align-items: center;
				.item-img {
					width: 80rpx;
					height: 80rpx;
					margin-left: 30rpx;
					image {
						width: 80rpx;
					}
				}
			}
			.item-content {
				margin-left: 24rpx;
				.title {
					width: 216rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #929496;
					white-space: nowrap; /* 强制文本在一行内显示 */  
					  overflow: hidden; /* 隐藏溢出的文本 */  
					  text-overflow: ellipsis; /* 用省略号表示被修剪的文本 */ 
				}
				.value {
					width: 216rpx;
					font-weight: 500;
					font-size: 32rpx;
					color: #181D21;
					margin-top: 8rpx;
					white-space: nowrap; /* 强制文本在一行内显示 */  
				  overflow: hidden; /* 隐藏溢出的文本 */  
				  text-overflow: ellipsis; /* 用省略号表示被修剪的文本 */ 
				}
			}
		}
	}
</style>